স্ট্রাকচারাল ডিরেক্টিভস Angular এর এমন ধরনের ডিরেক্টিভ যা DOM-এর কাঠামো পরিবর্তন করে, যেমন কোনো এলিমেন্ট যুক্ত করা, সরানো বা দেখানো। এই ডিরেক্টিভগুলি সাধারণত * চিহ্ন দিয়ে শুরু হয়। স্ট্রাকচারাল ডিরেক্টিভস Angular অ্যাপ্লিকেশনে ডাইনামিক কনটেন্ট রেন্ডার করতে সাহায্য করে। সবচেয়ে বেশি ব্যবহৃত স্ট্রাকচারাল ডিরেক্টিভস হলো ngIf, ngFor, এবং ngSwitch।
1. ngIf
ngIf ডিরেক্টিভটি একটি শর্তের ভিত্তিতে DOM-এ কোনো এলিমেন্ট প্রদর্শন বা অদৃশ্য করে। এটি ব্যবহৃত হয় যখন আপনি কোনো নির্দিষ্ট শর্ত বা এক্সপ্রেশনের উপর ভিত্তি করে কন্টেন্ট দেখাতে চান।
উদাহরণ:
<div *ngIf="isVisible">This content is visible if isVisible is true</div>
এখানে, isVisible যদি true হয়, তাহলে এই div এলিমেন্টটি DOM-এ রেন্ডার হবে। যদি false হয়, তবে এটি DOM থেকে সরিয়ে ফেলা হবে।
ngIf with Else:
আপনি ngIf এর সাথে else ব্যবহারের মাধ্যমে শর্ত না মেটানোর পরিস্থিতিতে অন্য কোনো কন্টেন্টও দেখাতে পারেন।
<div *ngIf="isVisible; else elseBlock">This content is visible if isVisible is true</div>
<ng-template #elseBlock>
<div>This content is shown if isVisible is false</div>
</ng-template>
এখানে, যদি isVisible false হয়, তবে elseBlock টেমপ্লেটটি রেন্ডার হবে।
2. ngFor
ngFor ডিরেক্টিভটি Angular অ্যাপ্লিকেশনে একটি লিস্ট বা অ্যারের প্রতিটি আইটেমের জন্য একটি HTML এলিমেন্ট রেন্ডার করতে ব্যবহৃত হয়। এটি ব্যবহৃত হয় যখন আপনি একটি অ্যারে বা লিস্ট থেকে ডেটা তুলে এনে তার উপর ভিত্তি করে UI রেন্ডার করতে চান।
উদাহরণ:
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
এখানে items একটি অ্যারে বা লিস্ট এবং ngFor ডিরেক্টিভের মাধ্যমে এই লিস্টের প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট তৈরি হবে।
ngFor with Index:
আপনি ngFor-এ লুপের মধ্যে আইটেমের ইনডেক্সও ব্যবহার করতে পারেন:
<ul>
<li *ngFor="let item of items; let i = index">{{ i + 1 }}. {{ item }}</li>
</ul>
এখানে, index এর মাধ্যমে প্রতিটি আইটেমের ইনডেক্স পাওয়া যাবে এবং তা UI তে দেখানো হবে।
3. ngSwitch
ngSwitch ডিরেক্টিভটি একাধিক শর্ত পরীক্ষা করার জন্য ব্যবহৃত হয় এবং প্রতিটি শর্তের জন্য নির্দিষ্ট কন্টেন্ট দেখায়। এটি switch এবং case এর মতো কাজ করে, যেখানে একটি শর্তের ভিত্তিতে একটি নির্দিষ্ট ব্লক রেন্ডার করা হয়।
উদাহরণ:
<div [ngSwitch]="color">
<p *ngSwitchCase="'red'">The color is red</p>
<p *ngSwitchCase="'blue'">The color is blue</p>
<p *ngSwitchDefault>The color is unknown</p>
</div>
এখানে, color ভেরিয়েবলের মান অনুযায়ী কন্টেন্ট রেন্ডার হবে:
- যদি
colorহলো'red', তবে "The color is red" দেখাবে। - যদি
colorহলো'blue', তবে "The color is blue" দেখাবে। - অন্য কোন মান হলে,
ngSwitchDefaultঅংশটি রেন্ডার হবে, যা "The color is unknown" দেখাবে।
সারাংশ
Angular এর স্ট্রাকচারাল ডিরেক্টিভস DOM-এ কন্টেন্টের উপস্থিতি নিয়ন্ত্রণ করে। ngIf শর্ত অনুযায়ী কন্টেন্ট দেখানোর বা লুকানোর কাজ করে, ngFor একটি অ্যারে বা লিস্টের প্রতিটি আইটেমের জন্য কন্টেন্ট রেন্ডার করে, এবং ngSwitch একাধিক শর্তের মধ্যে থেকে একটি নির্দিষ্ট কন্টেন্ট প্রদর্শন করে। এই ডিরেক্টিভগুলি Angular অ্যাপ্লিকেশনগুলিতে ডাইনামিক এবং ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরিতে সাহায্য করে।
